<template>
  <el-dialog
    v-dialogDrag
    title="过程检验"
    :visible="visible"
    width="90%"
    custom-class="original_dialog"
    :append-to-body="true"
    @open="handleOpen"
    @close="close"
  >
    <div>
      <div
        id="printContent"
        ref="printContent"
        v-loading="loading"
        element-loading-text="打印锁定中"
      >
        <el-card shadow="always" :body-style="{ padding: '10px' }">
          <!-- <div slot="header">
            <span>热处理原始记录表单</span>
          </div> -->

          <UnOriginalChart
            :assignmentToken="assignmentToken"
            :stage2="stage2"
            :row="row"
            style="height: 500px;width:100%"
            class="chartContent"
          />
          <el-form
            ref="form"
            :model="form"
            label-width="120px"
            :inline="false"
            size="mall"
          >
            <el-row :gutter="20">
              <el-col :span="8" :offset="0">
                <el-form-item label="设备名称:">
                  {{ row.deviceName }}
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="工序名称:">
                  {{ row.processName }}
                </el-form-item> </el-col
              ><el-col :span="8" :offset="0">
                <el-form-item label="炉批次:">
                  {{ row.batchNumber }}
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="零件名称:">
                  {{ row.partName }}
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="零件数量:">
                  {{ row.realPartCount }}
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="材料牌号:">
                  {{ row.materialMark }}
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="装炉时间:">
                  <!-- | formatDate  -->
                  <!-- {{ start | formatDate }} -->
                  {{ row.chargeInTime }}
                </el-form-item>
              </el-col>

              <!-- <el-col :span="8" :offset="0">
                <el-form-item label="设定温度:">
                  {{ setTemperatureLast }}℃
                </el-form-item>
              </el-col> -->
              <el-col :span="8" :offset="0">
                <el-form-item label="出炉时间:">
                  {{ row.outTime }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card
          shadow="always"
          :body-style="{ padding: '10px' }"
          style="margin-top: 10px"
        >
          <div slot="header">
            <div class="w100 flex-x flex-space">
              <span>产品加工过程信息</span>
              <div class="flex-x">
                <span class="tableTitle">系统判定结论：</span>
                <!-- <el-tag type="success">检验合格</el-tag> -->
                <el-tag type="warning">检验不合格</el-tag>
              </div>
              <!-- <el-tag type="warning">检验不合格</el-tag> -->
            </div>
          </div>
          <UnOriginalTable
            :table-data="formulaRecordInfosList"
            class="tablePrint"
            id="tablePrint"
          />
        </el-card>
      </div>
    </div>
    <span slot="footer">
      <el-button type="primary" size="small" @click="close">数据导出</el-button>
      <el-button type="primary" size="small" @click="close">下 载</el-button>
      <el-button type="primary" size="small" @click="printChart"
        >打 印</el-button
      >
      <el-button size="small" @click="close">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import UnOriginalChart from "./UnOriginalChart.vue";
import UnOriginalTable from "./UnOriginalTable.vue";
import { mapGetters } from "vuex";
import { start, end } from "./constant";
import { formatDate } from "@/filter/index";
export default {
  components: { UnOriginalChart, UnOriginalTable },
  props: {
    formulaRecordInfosList: {
      type: Array,
      default: () => []
    },
    assignmentToken: {
      type: String,
      default: ""
    },
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      start,
      end,
      form: {},
      loading: false
    };
  },

  computed: {
    ...mapGetters(["controlDeviceInfo"]),
    stage2() {
      return this.formulaRecordInfosList.find(item => item.stageId == 2);
    },
    // 获取第二阶段的设定温度
    setTemperatureLast() {
      return (
        this.formulaRecordInfosList[this.formulaRecordInfosList.length - 1]
          ?.setTemperature || "-"
      );
    },
    getData() {
      return function(time, key) {
        return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
      };
    }
  },
  methods: {
    printChart() {
      this.$print(this.$refs.printContent);
      this.loading = true;
      setTimeout(() => {
        let arr = document.getElementsByClassName("isNeedRemove");
        arr.forEach(res => {
          res.remove();
        });
        this.loading = false;
      }, 2000);
      this.$nextTick(() => {
        let arr = document.getElementsByClassName("isNeedRemove");
        arr.forEach(res => {
          res.remove();
        });
        console.log(arr);
      });
    },
    // 弹窗打开执行操作
    handleOpen() {},
    close() {
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss">
.original_dialog {
  .el-form-item {
    margin-bottom: 0;
  }
}
.tableTitle {
  font-size: 18px;
  font-weight: 800;
}
</style>
